<script lang="ts" setup>
import type { IconType } from '~/types';
  defineProps<{
    icon?: IconType
    fill?: boolean
  }>()
</script>

<template>
  <button class="flex items-center justify-center" :class="{ fill }">
    <div v-if="icon" class=" mr-2 felx justify-center items-center">
      <SVGIcon :type="icon" />
    </div>
    <div>
      <slot></slot>
    </div>
  </button>
</template>

<style lang="scss" scoped>
  button {
    height: 30px;
    padding: 0 12px;
    border-radius: calc(var(--el-radius) / 2);
    border: 1px solid var(--el-border-color);
  }
  .fill {
    background-color: var(--el-border-color);
  }
</style>


